<template>
  <div>
    <!-- 弹窗 -->
    <!-- :title="canEdit ? '编辑' : '详情'" -->
    <el-dialog
      append-to-body
      :before-close="closeDialog"
      :visible.sync="showEdit"
      :title="canEdit ? $t('编辑') : $t('详情')"
      width="90%"
      :close-on-click-modal="false">
      <!-- 不限地区 , 区分地区 -->
      <el-tabs v-model="activeName" type="card">
        <!-- 不限地区 -->
        <el-tab-pane :label="$t('不限地区')" name="first">
          <Nolimit @close="showEdit = false" :canEdit="canEdit" :FormData="FormData" />
        </el-tab-pane>
        <!-- 区分地区 -->
        <el-tab-pane :label="$t('区分地区')" v-if="canEdit" name="second">
          <Limit ref="Limit" :FormData="FormData" />
        </el-tab-pane>
        <!-- 区分地区详情 详情才显示-->
        <el-tab-pane :label="$t('区分地区')" name="third" v-if="!canEdit">
          <LimitDetail @close="showEdit = false" ref="limitDetailRef" :FormData="FormData" />
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import Limit from './limit.vue'
import LimitDetail from './limitDetail.vue'
import Nolimit from './nolimit.vue'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'ErpDistributionPlusWebAddExpress',
  components: {
    Limit,
    LimitDetail,
    Nolimit,
  },
  data() {
    return {
      FormData: {},
      activeName: 'first',
      showEdit: false,
      /**是否能修改 */
      canEdit: false,
    }
  },
  watch: {
    showEdit(newValue) {
      if (newValue) {
        this.$nextTick(() => this.$refs['limitDetailRef']?.getList())
      }
    },
  },

  mounted() {},

  methods: {
    closeDialog() {
      this.activeName = 'first'
      this.showEdit = false
      if (this.$refs.Limit) {
        this.$refs.Limit.expandRowKeys = []
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__footer {
  padding: 0;
}
::v-deep .el-table--medium .el-table__cell {
  padding: 4px !important;
}
::v-deep .el-table .el-table__cell {
  padding: 4px !important;
}
</style>
